<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" plain @click="onLiveMemberAdd">添加</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="用户ID" align="center" prop="id" />
			<el-table-column label="用户昵称" align="center" prop="nickname" />
			<el-table-column label="用户微信号" align="center" prop="username" />
			<el-table-column label="角色" align="center" prop="role" :formatter="formatterRole" />
			<el-table-column label="创建时间" align="center" :formatter="formatterCreateTime" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onLiveMemberDelete(row)" type="text" style="color: #f56c6c">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<live-member-add-dialog ref="liveMemberAddRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { livesApi } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';

import LiveMemberAddDialog from './dialog/LiveMemberAddDialog.vue';

const LivesApi = livesApi()
export default {
	name: 'liveMember',
	components: { LiveMemberAddDialog },
	setup() {
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const queryFormRef = ref(null);
		const liveMemberAddRef = ref(null);

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 直播成员添加
		const onLiveMemberAdd = () => {
			(liveMemberAddRef.value as any)?.openDialog({}, () => getList());
		};
		// 直播成员删除
		const onLiveMemberDelete = (row:any) => {
			ElMessageBox.confirm(`是否确认删除用户ID为${row.id}的数据项？`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return LivesApi.deleteLivesMember(row);
				})
				.then(() => {
					ElMessage.success('删除成功');
					getList();
				})
				.catch(() => {});
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_livesMemberList(state.queryParams);
		};

		// 角色字典
		const formatterRole = (row: any) => {
			switch (row.role) {
				case 1:
					return '管理员';
				case 2:
					return '主播';
				case 3:
					return '运营者';
				default:
					return '未知错误';
			}
		};
		// 创建时间
		const formatterCreateTime = (row:any) => {
			return timeDictionary(row.create_time)
		}

		/********** 网络事件 **********/
		// 直播成员列表
		const _livesMemberList = (params: object = {}) => {
			LivesApi.livesMemberList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.info.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			queryFormRef,
			liveMemberAddRef,
			onLiveMemberAdd,
			onLiveMemberDelete,
			getList,
			formatterRole,
			formatterCreateTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
